<template>
	<view class="shop_box">
		<!-- 顶部 -->
		<view class="shop_contain">
			<!-- banner图 -->
			<view class="mallTop">
				<view class="topImg">
					<view class="carousel-section">
						<swiper class="carousel" @change="swiperChange" circular indicator-dots
							indicator-color="rgba(1, 1, 1, .3)" indicator-active-color="#fff">
							<swiper-item v-for="(item, index) in bannerList" :key="index" class="carousel-item"
								@click="bannerGoToDetail(item)">
								<image :src="item.ImgUrl" mode="aspectFill" />
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
			<!-- 好物商城各个类型 -->
<!-- 			<view class="type_box">
				<u-scroll-list :indicator="indicator" indicatorColor="#fff0f0" indicatorActiveColor="#f56c6c">
					<view v-for="(item, index) in listType" :key="index" class="img_box" @click="goTypeList(item)">
						<image :src="item.LogoImg"></image>
						<view class="">{{item.Name}}</view>
					</view>
				</u-scroll-list>
			</view> -->
		</view>
		<!-- 内容推荐 -->
		<view class="shop_list_box">
			<view class="car_title">新品推荐</view>
			<view class="shop_flex_box">
				<view class="shop_list_flex">
					<view class="shop_item" v-for="(item,index) in newsShowList" :key="index" @click="handleGoToDetail(item)">
						<image :src="item.Img" mode=""></image>
						<view class="note">{{item.Name}}</view>
						<view class="price">￥{{item.ShowPrice}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Config from '@/config/index.js'
	import {
		getGuideSiteList
	} from '@/api/base.js'
	import {
		getProductCategoryList,
		getShopGoodsDetail
	} from '@/api/mall.js'
	export default {
		data() {
			return {
				bannerList: [], //banner
				listType: [], //类型
				indicator: false, //隐藏指示器
				newsShowList: [], //新品推荐列表
			}
		},
		onLoad() {
      let that = this;
			that.getSite();
			that.getShopType();
			that.getNewShopList();
		},
		methods: {
			//跳转到产品详情界面
			handleGoToDetail(item) {
				console.log(item)
				uni.navigateTo({
					url: `/mall_subpages/activitiesList/admissionTicketDetail?id=${item.Id}&type=${item.Type}`
				})
			},
			//跳转列表界面
			goTypeList(e) {
				uni.navigateTo({
					url: '/mall_subpages/goods-list-search/goods-list-search?ProductCategoryId=' + e.Id + '&Title=' + e.Name + '&type=2'
				})
			},
			//切换轮播
			swiperChange(event) {
				let index = event.detail.current;
				this.currentSwiper = index;
				this.imgBg = this.bannerList[index].ImgUrl;
			},
			//轮播跳转
			bannerGoToDetail(item) {
				if (isURl(item.LinkUrl)) {
					window.location.href = item.LinkUrl;
				} else {
					uni.navigateTo({
						url: item.LinkUrl
					});
				}
			},
			// 获取站点配置信息
			async getSite() {
				try {
					const {
						Data
					} = await getGuideSiteList({
						ParentId: Config.site.mall_id,
						layers: 2,
					});
					console.log(Data)
					//banner列表
					const _bannerObj = Data.find(item => item.Id === Config.site.mall_banner_id);
					if (_bannerObj) {
						this.bannerList = _bannerObj.Children;
						this.imgBg = _bannerObj.Children[0].ImgUrl;
					}
				} catch (e) {}
			},
			// 获取产品类型
			async getShopType() {
				try {
					const {
						Data
					} = await getProductCategoryList({
						ProductType: 2,
						Index: 1,
						Size: 10,
					});
					Data[0].ProductCategoryList.sort((a, b) => a.Sort - b.Sort);
					console.log(Data[0].ProductCategoryList)
					this.listType = Data[0].ProductCategoryList

				} catch (e) {}
			},
			//获取新品推荐
			async getNewShopList() {
				try {
					const {
						Data
					} = await getShopGoodsDetail({
						Tags: "10",
						Size:10000,
					});
					console.log("新品推荐",Data)
					this.newsShowList = Data;
				} catch (e) {}
			},
		},
	}
</script>

<style scoped lang="scss">
	.shop_box {

		.shop_contain {
			background-color: #fff;

			.mallTop {
				width: 100%;
				height: 300rpx;
				// background-image: url(../../static/images/topBg.png);
				background-size: 100%;

				.topImg {
					width: 100%;
					height: 100%;

					.carousel-section {
						height: 100%;

						/deep/ swiper {
							width: 100%;
							height: 100%;
						}
					}

					image {
						width: 100%;
						height: 100%;

					}
				}
			}

			.type_box {
				/deep/ .u-scroll-list {
					padding: 10px;
				}

				.img_box {
					width: 20%;
					text-align: center;

					image {
						width: 120rpx;
						height: 120rpx;
					}

					view {
						font-size: 14px;
						margin-top: 5px;
					}
				}
			}
		}

		.shop_list_box {
			// margin-top: 2%;
			padding: 2% 3%;
			background-color: #fff;

			.car_title {
				font-size: 18px;
				font-weight: bold;
				color: #000;
				margin-top: 2%;
				margin-bottom: 2%;
			}

			.shop_flex_box {


				.shop_list_flex {
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					justify-content: space-between;

					.shop_item {
						width: 48%;
						margin: 2%;
						height: 530rpx;
						margin-left: 0;
						margin-right: 0;
						position: relative;

						image {
							width: 100%;
							height: 360rpx;
						}

						.note {
							margin-left: 2%;
							margin-top: 4%;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
						}

						.price {
							position: absolute;
							bottom: 2%;
							left: 2%;
						}
					}
				}
			}
		}
	}
</style>